<template>
  <div>
    <van-nav-bar :title="`${comment.reply_count}条回复`">
       <van-icon slot="left" name="cross" @click="$emit('colse')"></van-icon>
    </van-nav-bar>
    <comment-item :comment="comment"/>
    <!-- 所有评论回复 -->
    <van-cell title="所有回复"></van-cell>
    <comment-list
       :source="comment.com_id" type="c"
       :list='commtentList'
    />
    <!-- 回复 -->
    <div class="article-bottom">
      <van-button class="comment-btn" type="default"  round size="small" @click="isShow=true">写评论</van-button>
    </div>
    <!-- 发布回复 -->
      <van-popup v-model="isShow" position="bottom" >
          <post-comment :commentId='comment.com_id' :art-id="artId" @post-success="onPostSuccess"/>
      </van-popup>
  </div>
</template>
<script>
import commentItem from './comment-item.vue'
import commentList from './comment-list.vue'
import postComment from './post-comment.vue'
export default {
  props:{
    comment:{
      type:Object,
      required:true
    },
    artId:{
       type:[String,Number,Object],
       required:true
    }
  },
   components:{
     commentItem,
     commentList,
     postComment
   },
   data(){
     return {
       isShow:false,
       commtentList:[]//评论的回复列表
     }
   },
   methods:{
     onPostSuccess(comment){
       //把发布成功的评论数据对象放到评论列表顶部
       this.commtentList.unshift(comment)
       //更新评论总数量
       this.comment.reply_count++
       this.isShow=false
     }
   }
}
</script>
<style lang="less" scoped>
.article-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    border-top: 1px solid #d8d8d8;
    .comment-btn{
      width: 200px;
      height:30px;
    }
  }
</style>
